Redux Thunk এবং Redux Saga দিয়ে Async Actions হ্যান্ডেল করা

Redux তে Async Actions হ্যান্ডেল করার জন্য দুটি জনপ্রিয় মেথড হলো Redux Thunk এবং Redux Saga। দুটি মেথডই একে অপর থেকে ভিন্ন, তবে উভয়ই অ্যাসিঙ্ক্রোনাস অপারেশন (যেমন API কল বা ডেটা ফেচিং) পরিচালনা করার জন্য ব্যবহৃত হয়।

1. Redux Thunk

Redux Thunk হল একটি middleware যা Redux স্টোরের ডিসপ্যাচের জন্য ফাংশন বা সাধারণ অ্যাকশন অবজেক্ট সমর্থন করে। এটি অ্যাসিঙ্ক্রোনাস ফাংশনগুলিকে ডিসপ্যাচ করতে সাহায্য করে। Redux Thunk ব্যবহার করে আপনি asynchronous operations (যেমন API কল) সহজভাবে হ্যান্ডেল করতে পারেন।

Redux Thunk দিয়ে Async Actions হ্যান্ডেল করার পদ্ধতি:

1. Redux Thunk ইন্সটলেশন
   প্রথমে আপনাকে redux-thunk ইন্সটল করতে হবে:

   npm install redux-thunk

2. Redux Thunk Middleware যুক্ত করা
   Redux store কনফিগারেশনে thunk middleware যোগ করুন:

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   import rootReducer from './reducers';
   
   const store = createStore(rootReducer, applyMiddleware(thunk));

3. Async Action Creator তৈরি করা
   Redux Thunk ব্যবহার করে আপনি অ্যাকশন ক্রিয়েটরকে ফাংশন হিসেবে ব্যবহার করবেন। এখানে একটি উদাহরণ দেওয়া হলো:

   // actions.js
   export const fetchData = () => {
     return async (dispatch) => {
       try {
         dispatch({ type: 'FETCH_DATA_REQUEST' });
   
         const response = await fetch('https://api.example.com/data');
         const data = await response.json();
   
         dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_DATA_FAILURE', error: error.message });
       }
     };
   };

4. Reducer তৈরি করা
   Reducer-এ অ্যাকশন অনুযায়ী স্টেট পরিবর্তন করুন:

   // reducer.js
   const initialState = {
     loading: false,
     data: [],
     error: '',
   };
   
   const dataReducer = (state = initialState, action) => {
     switch (action.type) {
       case 'FETCH_DATA_REQUEST':
         return { ...state, loading: true };
       case 'FETCH_DATA_SUCCESS':
         return { ...state, loading: false, data: action.payload };
       case 'FETCH_DATA_FAILURE':
         return { ...state, loading: false, error: action.error };
       default:
         return state;
     }
   };
   
   export default dataReducer;

5. Component এ Async Action ডাকা
   React কম্পোনেন্টে, Redux Thunk এর মাধ্যমে অ্যাসিঙ্ক্রোনাস অ্যাকশন চালাতে হবে:

   import React, { useEffect } from 'react';
   import { useDispatch, useSelector } from 'react-redux';
   import { fetchData } from './actions';
   
   const DataComponent = () => {
     const dispatch = useDispatch();
     const { data, loading, error } = useSelector((state) => state.data);
   
     useEffect(() => {
       dispatch(fetchData());
     }, [dispatch]);
   
     if (loading) return <div>Loading...</div>;
     if (error) return <div>Error: {error}</div>;
   
     return (
       <div>
         <h1>Data</h1>
         <ul>
           {data.map((item) => (
             <li key={item.id}>{item.name}</li>
           ))}
         </ul>
       </div>
     );
   };
   
   export default DataComponent;

2. Redux Saga

Redux Saga হল আরেকটি middleware যা অ্যাসিঙ্ক্রোনাস কার্যক্রম হ্যান্ডেল করার জন্য ব্যবহৃত হয়। এটি generator ফাংশন ব্যবহার করে ডেটা ফেচিং এবং অন্যান্য অ্যাসিঙ্ক্রোনাস কার্যক্রম পরিচালনা করে। Redux Saga দিয়ে আপনি কোডকে সিঙ্ক্রোনাসভাবে লিখতে পারেন, তবে প্রকৃতপক্ষে এটি অ্যাসিঙ্ক্রোনাস অপারেশন পরিচালনা করে।

Redux Saga দিয়ে Async Actions হ্যান্ডেল করার পদ্ধতি:

1. Redux Saga ইন্সটলেশন
   প্রথমে redux-saga ইন্সটল করুন:

   npm install redux-saga

2. Redux Saga Middleware যুক্ত করা
   Redux store কনফিগারেশনে saga middleware যোগ করুন:

   import { createStore, applyMiddleware } from 'redux';
   import createSagaMiddleware from 'redux-saga';
   import rootReducer from './reducers';
   import rootSaga from './sagas';
   
   const sagaMiddleware = createSagaMiddleware();
   
   const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
   
   sagaMiddleware.run(rootSaga);

3. Saga তৈরি করা
   Redux Saga দিয়ে সাগা তৈরি করতে হবে। এখানে একটি উদাহরণ:

   // sagas.js
   import { call, put, takeEvery } from 'redux-saga/effects';
   
   function* fetchDataSaga() {
     try {
       const response = yield call(fetch, 'https://api.example.com/data');
       const data = yield response.json();
       yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
     } catch (error) {
       yield put({ type: 'FETCH_DATA_FAILURE', error: error.message });
     }
   }
   
   function* rootSaga() {
     yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga);
   }
   
   export default rootSaga;

4. Reducer তৈরি করা
   Reducer-এ অ্যাকশন অনুযায়ী স্টেট পরিবর্তন করুন (Redux Thunk এর মতো):

   // reducer.js
   const initialState = {
     loading: false,
     data: [],
     error: '',
   };
   
   const dataReducer = (state = initialState, action) => {
     switch (action.type) {
       case 'FETCH_DATA_REQUEST':
         return { ...state, loading: true };
       case 'FETCH_DATA_SUCCESS':
         return { ...state, loading: false, data: action.payload };
       case 'FETCH_DATA_FAILURE':
         return { ...state, loading: false, error: action.error };
       default:
         return state;
     }
   };
   
   export default dataReducer;

5. Component এ Async Action ডাকা
   React কম্পোনেন্টে, Redux Saga এর মাধ্যমে অ্যাসিঙ্ক্রোনাস অ্যাকশন চালাতে হবে:

   import React, { useEffect } from 'react';
   import { useDispatch, useSelector } from 'react-redux';
   
   const DataComponent = () => {
     const dispatch = useDispatch();
     const { data, loading, error } = useSelector((state) => state.data);
   
     useEffect(() => {
       dispatch({ type: 'FETCH_DATA_REQUEST' });
     }, [dispatch]);
   
     if (loading) return <div>Loading...</div>;
     if (error) return <div>Error: {error}</div>;
   
     return (
       <div>
         <h1>Data</h1>
         <ul>
           {data.map((item) => (
             <li key={item.id}>{item.name}</li>
           ))}
         </ul>
       </div>
     );
   };
   
   export default DataComponent;

Redux Thunk vs Redux Saga

• Redux Thunk:
  • সরল এবং সহজ ব্যবহারের জন্য উপযোগী।
  • অ্যাসিঙ্ক্রোনাস অ্যাকশন ব্যবস্থাপনা জন্য কমপ্লেক্সিটি কম।
  • তবে কোডে লজিকাল বিভ্রাট হতে পারে।
• Redux Saga:
  • কমপ্লেক্স অ্যাসিঙ্ক্রোনাস কাজের জন্য উপযুক্ত।
  • Generator functions ব্যবহার করে অ্যাসিঙ্ক্রোনাস কাজকে সিঙ্ক্রোনাসভাবে পরিচালনা করা যায়।
  • অ্যাসিঙ্ক্রোনাস কাজের জন্য আরও শক্তিশালী এবং ফ্লেক্সিবল।

সারাংশ

• Redux Thunk ব্যবহার করলে আপনি সরাসরি অ্যাসিঙ্ক্রোনাস ফাংশনকে dispatch করতে পারেন এবং এতে কমপ্লেক্সিটি কম থাকে।
• Redux Saga ব্যবহার করলে আপনি অ্যাসিঙ্ক্রোনাস লজিককে আরও সিস্টেমেটিকভাবে এবং স্কেলেবলভাবে পরিচালনা করতে পারেন, বিশেষত যখন কাজটি জটিল হয় এবং একাধিক অ্যাসিঙ্ক্রোনাস অ্যাকশন পরিচালনা করতে হয়।

আপনার প্রোজেক্টের চাহিদা অনুযায়ী আপনি Redux Thunk বা Redux Saga নির্বাচন করতে পারেন।